<template>
  <div>
    <div
      class="g-con"
      v-if="!$isMobile"
    >
      <Banner bannerModel="8" />

      <div
        class="introduce"
        ref="introduce"
      >
        <div class="title">
          {{ t('about.pt') }}
        </div>
        <div
          v-if="locale === 'zh-CN'"
          class="con mt-4 zh"
        >
          <div>船队经理，肩负着全球海运业在安全、环境、规则、标准、技术、成本、效率等方面健康发展的重任。我们以船队经理为中心，辐射与之密切相关的国际组织、政府当局、港口、船级社、船员、船厂、设备商、服务商、供应商、代理、保险等各方。为船队经理提供专业、深度、智能的数字化修船解决方案，并建立使其采购工作高效、便利、可视化的平台。</div>
          <div>我们致力于促进国际海事界交流，每日中英双语发布最新海事新闻资讯，特别注重国内重大海事新闻的对外输出。密切关注最新规则和技术，以及绿色和数字化航运，多维度、全面的海运业脱碳法规、技术和动态跟踪以及合规解决方案。建立遍布全球主要航运国家和地区的推广网络，有助于将您的产品和服务传递到全世界。</div>
        </div>
        <div
          v-if="locale === 'en'"
          class="con mt-4"
        >
          <div>At FleetManagers.Net, we specialize in providing smart digital ship repair solutions tailored specifically for fleet managers. Our platform streamlines and visualizes the ship procurement process, making it as efficient and convenient for our clients as possible. We recognize the critical role fleet managers have in directing the safety, environmental stewardship, regulatory compliance, technological advancements, cost-effectiveness, and operational efficiency of the global maritime industry. We enable them to connect with international organizations, government authorities, ports, classification societies, crews, shipyards, manufacturers, service providers, chandlers, agents, insurers, and other closely affiliated parties through our dedicated platform.</div>
          <div>We promote exchanges within the international maritime community by releasing daily maritime news updates in both English and Chinese, focusing on the latest rules and technologies in green and digital shipping, multi-dimensional and comprehensive decarbonization regulations, technology, and dynamic tracking and compliance solutions. Our network spans shipping major hubs and regions worldwide, facilitating the seamless delivery of your products and services to a global audience. Let FleetManagers.Net be your partner at the forefront of propelling the maritime industry towards a sustainable and connected future.</div>
        </div>
        <div class="mt-5">
          <img
            v-if="locale === 'zh-CN'"
            src="@/assets/img/ab-zh.png"
          />
          <img
            v-if="locale === 'en'"
            src="@/assets/img/ab-en.png"
          />
        </div>
      </div>

      <!-- <div class="team">
        <div class="title">
          {{ t('about.t1') }}
        </div>
        <ul class="list">
          <li
            class="item"
            v-for="item in 6"
            :key="item"
          >
            <div class="left">
              <img
                src="@/assets/img/i3.png"
                alt=""
              />
            </div>
            <div class="right">
              <h2>name</h2>
              <div class="position">Creotive Director</div>
              <div class="txt">Summer is a senior editor on the platform with extensive shipping experience.</div>
            </div>
          </li>
        </ul>
      </div> -->

      <div class="global-network">
        <div class="left">
          <h2>{{ t('about.t2') }}</h2>
          <ul
            v-if="activeSite"
            class="way-list"
          >
            <li class="way-item">
              <h3>{{ t('about.t2_1') }}</h3>
              <div class="txt">{{ activeSite.address }}</div>
            </li>
            <li class="way-item">
              <h3>{{ t('about.t2_2') }}</h3>
              <div class="txt">{{ activeSite.email }}</div>
            </li>
            <li class="way-item">
              <h3>{{ t('about.t2_3') }}</h3>
              <div class="txt">{{ activeSite.phone }}</div>
            </li>
          </ul>
        </div>
        <div class="right flexcc">
          <img
            src="@/assets/img/2023-11-03_101748.png"
            alt=""
          />
          <el-tooltip
            v-for="(item, index) in siteList"
            :key="index"
            class="box-item"
            effect="dark"
            placement="top"
          >
            <template #content> {{ item.address }}<br />{{ item.email }} <br />{{ item.phone }} </template>
            <div
              :style="item.style"
              class="mark"
              @click="siteChange(item)"
            ></div>
          </el-tooltip>
        </div>
      </div>
      <div class="information">
        <div class="title">
          {{ t('about.t3') }}
        </div>
        <ul class="newslist">
          <li
            class="item"
            v-for="item in newsListValue"
            :key="item"
            @click="openUrl('/detail', {id: item.id})"
          >
            <img
              :src="item.newsImage"
              alt=""
            />
            <h2 class="line-2">{{ item.newTitle }}</h2>
            <div class="txt line-4">
              {{ toText(item.newContent, 120) }}
            </div>
          </li>
        </ul>
      </div>
      <div class="partners">
        <h2>{{ t('about.t5') }}</h2>
        <ul class="partners-list">
          <li class="item">
            <div class="num">{{ partnersObj?.partnersNum }}</div>
            <p class="name">{{ t('about.t5_1') }}</p>
          </li>
          <li class="item">
            <div class="num">{{ partnersObj?.customerNum }}</div>
            <p class="name">{{ t('about.t5_2') }}</p>
          </li>
          <li class="item">
            <div class="num">{{ partnersObj?.enterpriseNum }}</div>
            <p class="name">{{ t('about.t5_3') }}</p>
          </li>
        </ul>
        <ul class="img-list">
          <li
            class="item"
            v-for="item in partnersList"
            :key="item"
            @click.stop="openShipyard(item)"
          >
            <img
              :src="item.enterpriseLogo"
              alt=""
            />
          </li>
        </ul>
      </div>
      <div class="join-us">
        <div class="title">
          {{ t('about.t4') }}
        </div>
        <div class="content">
          <div class="button-prev">
            <img
              src="@/assets/img/btn_shangyiye_nor.png"
              alt=""
            />
          </div>
          <Swiper
            v-if="headBannerList.length"
            class="swiper-container"
            :navigation="{
              nextEl: '.button-next',
              prevEl: '.button-prev'
            }"
            :modules="modules"
            :pagination="{ clickable: true }"
            :autoplay="{ delay: 5000, disableOnInteraction: false }"
            loop
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(item, i) in headBannerList"
              :key="i"
            >
              <a
                :href="item.bannerHref"
                target="_blank"
                ><img
                  :src="item.bannerImage"
                  alt=""
              /></a>
            </swiper-slide>
            <div class="swiper-pagination"></div>
          </Swiper>
          <div class="button-next">
            <img
              src="@/assets/img/btn_xiayiye_nor.png"
              alt=""
            />
          </div>
        </div>
        <div class="join-footer">
          <h3>{{ t('about.t4_1') }}</h3>
          <div>{{ t('about.t4_2') }}: <span>china@fleetmanagers.net</span></div>
          <img
            src="@/assets/img/renwu.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div v-if="$isMobile">
      <mIndex />
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation } from 'swiper'
import { onMounted, ref, getCurrentInstance, watch, computed, nextTick } from 'vue'
import 'swiper/swiper-bundle.css'
import img from '@/assets/img/i3.png'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import { bannerList, newsList, getPartnersStatistics, getPartnersPageList } from '@/service/aboutUs.js'
import mIndex from './mIndex.vue'
import Banner from '@/components/Banner.vue'
import { toText, openUrl } from '@/utils'
import useAbout from '@/stores/about'

const router = useRouter()
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const modules = [Autoplay, Navigation]

onMounted(() => {
  locateToIntroduce()
})

const store = useAbout()
const { setLocate } = store
watch(
  () => store.key,
  () => {
    locateToIntroduce()
  }
)

// 定位到介绍
const introduce = ref(null)
const locateToIntroduce = () => {
  if (!store.isLocate) return
  nextTick(() => {
    setTimeout(() => {
      document.documentElement.scrollTo({ top: 420, behavior: 'instant' })
      setLocate(false)
    }, 50)
  })
}

const headBannerList = ref([])
const newsListValue = ref([])
const partnersObj = ref({})

const partnersList = ref([])
const getPartnersPageListFn = () => {
  getPartnersPageList({
    pageNum: 1,
    pageSize: 6
  }).then((res) => {
    partnersList.value = res.rows
  })
}

//
const openShipyard = ({ id }) => {
  const url = router.resolve({
    path: `/shipyard`,
    query: {
      id
    }
  })
  window.open(url.href)
}

const activeSite = ref(null)
const siteList = computed(() => {
  const arr = [
    {
      // 青岛
      style: {
        top: '143px',
        left: '302px'
      },
      address: t('about.site1.address'),
      email: 'china@fleetmanagers.net',
      phone: '+86 532 6688 1088'
    }
  ]
  activeSite.value = arr[0]
  return arr
})

const siteChange = (item) => {
  activeSite.value = item
}

//
const init = () => {
  bannerList({ bannerModel: 10 }).then((res) => {
    let imgArr = res.data.bannerImage.split(',')
    let hrefArr = res.data.bannerHref.slice(0, res.data.bannerHref.length - 1).split(',')
    headBannerList.value = imgArr.map((item, index) => {
      return {
        bannerImage: item,
        bannerHref: hrefArr[index]
      }
    })
  })
  newsList({ newLang: 'cn', pageSize: 4, pageNum: 1 }).then((res) => {
    newsListValue.value = res.rows
  })
  getPartnersStatistics().then((res) => {
    partnersObj.value = res.data
  })
  getPartnersPageListFn()
}
onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped>
.g-con {
  .global-network {
    width: 100%;
    display: flex;
    margin-top: 60px;

    .left {
      width: 420px;

      h2 {
        width: 62%;
        font-size: 24px;
        font-weight: 800;
        color: var(--mainColor);
        padding-bottom: 17px;
        border-bottom: 4px solid rgba(33, 33, 33, 1);
      }

      .way-list {
        width: 100%;

        .way-item {
          margin-top: 36px;

          h3 {
            font-size: 16px;
            font-weight: 800;
            line-height: 22px;
          }

          .txt {
            font-size: 16px;

            font-weight: 400;
            color: #252628;
            margin-top: 15px;
          }
        }
      }
    }

    .right {
      margin-left: 48px;
      flex: 1;
      padding-top: 27px;
      position: relative;

      img {
        max-width: 100%;
        max-height: 423px;
      }

      .mark {
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: pointer;
      }
    }
  }

  .partners {
    width: 100%;
    height: 400px;
    background: url('@/assets/img/bg.png');
    margin-top: 60px;
    padding-top: 64px;

    h2 {
      text-align: center;
      font-size: 30px;

      font-weight: bold;
      color: #ffffff;
    }

    .partners-list {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      margin: 45px 0 65px 0px;

      .item {
        width: 419px;
        height: 100%;
        text-align: center;

        &:not(:last-child) {
          border-right: 1px solid rgba(255, 255, 255, 1);
        }

        .num {
          line-height: 40px;
          font-size: 30px;

          font-weight: bold;
          color: #ffffff;
        }

        .name {
          font-size: 16px;

          font-weight: 400;
          color: #ffffff;
          line-height: 26px;
        }
      }
    }

    .img-list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0px 19px;

      .item {
        width: 187px;
        height: 90px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .title {
    width: 100%;
    color: rgba(202, 42, 2, 1);
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
    color: var(--mainColor);
    border-bottom: 2px solid black;
    margin-top: 50px;
    text-transform: uppercase;
  }

  .newslist {
    width: 100%;
    // display: flex;
    // justify-content: space-between;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    .item {
      //   width: 310px;
      //   padding-right: 8px;
      position: relative;

      &:not(:last-child) {
        &::after {
          position: absolute;
          content: '';
          display: block;
          height: 100%;
          width: 1px;
          background: rgba(234, 235, 236, 1);
          top: 0;
          right: -10px;
        }
      }

      img {
        width: 100%;
        height: 170px;
      }

      h2 {
        margin: 20px auto;
        font-size: 16px;
        font-weight: bold;
        color: #252628;
      }

      .txt {
        font-size: 12px;
        font-weight: 400;
        color: #252628;
        line-height: 18px;
      }
    }
  }

  .join-us {
    width: 100%;
    height: 660px;

    .content {
      height: 380px;
      width: 100%;
      padding-top: 58px;
      display: flex;

      .button-prev,
      .button-next {
        width: 5%;
        height: 100%;

        img {
          margin-top: 85px;
          width: 50px;
          height: 50px;
        }
      }

      :deep(.swiper) {
        width: 70%;
        height: 60%;
        border-radius: 0.1rem;
        --swiper-theme-color: #ff6600;
        --swiper-pagination-color: #248cc0;
        --swiper-navigation-color: #248cc0;
        --swiper-navigation-size: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .join-footer {
      width: 100%;
      height: 220px;
      background: rgba(202, 42, 2, 1);
      text-align: center;
      position: relative;
      padding-top: 75px;

      h3 {
        font-size: 30px;

        font-weight: bold;
        color: #ffffff;
      }

      div {
        font-size: 14px;

        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
        margin-top: 20px;

        span {
          font-weight: 600;
          font-size: 16px;
          // margin-left: 14px;
        }
      }

      img {
        position: absolute;
        right: -72px;
        top: -140px;
        width: 240px;
        height: 360px;
      }
    }
  }

  .team {
    // width:
    .list {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 30px;

      .item {
        width: 310px;
        // padding-right: 8px;
        display: flex;
        border: none;

        .left {
          width: 140px;
          height: 140px;
          margin-right: 18px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        // &:not(:last-child) {
        //     border-right: 1px solid rgba(234, 235, 236, 1);
        // }

        .right {
          flex: 1;

          h2 {
            margin: 0px;
            text-align: left;
            font-size: 16px;

            font-weight: bold;
            color: #252628;
            margin-top: 12px;
          }

          .position {
            font-size: 14px;

            font-weight: 400;
            margin: 8px auto;
            color: #6a6973;
            // line-height: 22px;
          }

          .txt {
            font-size: 12px;

            font-weight: 400;
            color: #252628;
            // line-height: 18px;
          }
        }
      }
    }
  }

  .introduce {
    .con {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      line-height: 1.8;
      div {
        text-align: justify;
      }
      &.zh {
        div {
          font-size: 15px;
          text-indent: 2em;
        }
      }
    }
  }
}
</style>
